/**
 * @Name: 基于layui
 * @Author: 潘晨晨
 * 最近修改时间: 2021/06/29
 */

layui.define(['jquery'],function(exports){
  var $ = layui.jquery;
    var obj ={
      init:function(element){
        var data = element.data
        var box = $(element.elemId);
        var themeColor = element.themeColor?element.themeColor:'#4395ff';
        var hoverBool = element.hoverBool===false?element.hoverBool:true;
        console.log(hoverBool)
        var themeStyle = element.themeStyle?element.themeStyle:'border';
        styleFun(themeColor,hoverBool,themeStyle);
        var html = '';
        html += '<ul>';
        data.forEach(function(e,i){
            html +='<li class="top-p">'+
                '<a class="_a" href="'+e.url+'">'+e.title+'</a>';
                if(e.children){
                    html +=   '<div class="vav-level-pcc"><ul>';
                    e.children.forEach(function(k,j){
                        html+= '<li> <a class="_a" href="'+k.url+'">'+k.title+'</a></li>';
                    });
                    html += '</ul></div>';
                }
            '</li>'
        });
        html += '</ul>';
        box.html(html)
        var currenturl = document.location.pathname;
        console.log(box)
        $( box ).find('._a').each(function(i,e){
            if($(e).attr('href')==currenturl){
                $(this).parents('.top-p').addClass('active');
            }
        })
      }
    }
 
    function styleFun(themeColor,hoverBool,themeStyle){
        var h = '';
        var t = ''
        if(hoverBool){
            h='.nav-pcc ul>li:hover{ background-color: #eee; }'
        }else{
            console.log('false')
            h='.nav-pcc ul>li:hover{ background-color: transparent; }'
        }
        if(themeStyle=='border'){
            t='.nav-pcc ul>li.active::after{ content:"";position:absolute;display:block; bottom:0; width:100%; border-bottom:3px '+themeColor+' solid }'
        }else{
            t='.nav-pcc ul>li.active{ background:'+themeColor +';color:#fff;}.nav-pcc ul>li.active:hover{color: inherit;}'
        }
        var $style = $('<style type="text/css">\
        .nav-pcc ul {margin: 0; padding: 0;}\
        .nav-pcc > ul>li{ float:left; line-height:34px; box-sizing:border-box; position: relative;}\
        .nav-pcc ul>li ._a{cursor: pointer;text-decoration: none; display: block; height: 100%; color: inherit; padding: 0 20px; }\
        .nav-pcc ul>li:hover .vav-level-pcc{ display: block;}'+t+h+'\
        .vav-level-pcc{ position: absolute; padding:10px 0;top: 31px; min-width: 96px;left: 50%; border-radius: 0 0 4px 4px; \
        background: #fff; text-align: center; line-height: 32px; z-index: 9999; display: none;  -webkit-transform: translate(-50%,0);}transform: translate(-50%,0); -webkit-box-shadow: 0 0 10px 2px rgb(0 0 0 / 6%); box-shadow: 0 0 10px 2px rgb(0 0 0 / 6%); }\
        .vav-level-pcc ul>li{position: relative; padding: 4px 0;}\
        .vav-level-pcc::before{content:""; position: absolute; top:0; border: 5px solid #fff; border-color: transparent transparent #fff;\
        top: -10px; width: 0; height: 0; left: 50%; }\
        </style>');
        $($('head')[0]).append($style);  
    }
    
    exports('NHighlight',obj);
  });
  
